import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import TopBar from './components/topBar/topBar';
import Slide from './components/slide/slide';
import CityLayer from './components/cityLayer/cityLayer';
import MovieList from './components/movieList/movieList';
import TabMenu from '../../components/tabMenu/tabMenu';
import RenderToBody from '../../components/renderToBody/RenderToBody';
import request from '../../utils/request';
import './index.scss';
class Home extends Component {
  state = {
    city: '上海', // 当前城市
    poster: [], // slide 海报
    movie: [], // 当前热映电影
    cityLayerVisible: false // 城市浮层是否展现
  }
  showCityLayer = () => {
    this.setState({
      cityLayerVisible: true
    });
  }
  hideCityLayer = () => {
    this.setState({
      cityLayerVisible: false
    });
  }
  onChangeCity = (city) => {
    this.setState({
      city,
    });
    this.hideCityLayer();
  }
  getData = async () => {
    const data = await request('/index');
    const { city, poster, movie } = data;

    this.setState({
      city,
      poster,
      movie
    });

  }
  componentDidMount () {
    this.getData()
  }
  render() {
    const { city, poster, movie, cityLayerVisible } = this.state;
    return (
      <div className='home'>
        <TopBar city={city} showCityLayer={this.showCityLayer} />
        <div className="home__slide">
          <div className="home__slideWrap">
            <Slide data={poster} />
          </div>
        </div>
        <ul className="home__content">
          { movie.map(item => <li key={item.name}><Link to="/detail"><MovieList data={item} /></Link></li>) }
        </ul>
        <TabMenu current="movie"/>
        {cityLayerVisible && <RenderToBody><CityLayer onClose={this.hideCityLayer} onSelect={this.onChangeCity}></CityLayer></RenderToBody>}
      </div>
    )
  }
}
export default Home;